<template>
  <div class="basic-info" v-if="hasUserInfo">
    <div class="banner">
      <img class="img" src="@/assets/images/space.png"/>
    </div>
    <div class="social">
      <avatar
        class="face"
        size="large"
        :src="userInfo.face"
        :vip="userInfo.vip.status"
        :official="userInfo.official"
      />
      <div class="trends">
        <div class="grid" v-if="followData">
          <div class="col">
            <span class="num">{{ formatNumber(followData.follower) }}</span>
            <span class="unit">粉丝</span>
          </div>
          <div class="col">
            <span class="num">{{ formatNumber(followData.following) }}</span>
            <span class="unit">关注</span>
          </div>
          <div class="col">
            <span class="num">{{ formatNumber(beliked) }}</span>
            <span class="unit">获赞</span>
          </div>
        </div>
        <template v-if="userInfo.is_followed">
          <van-button class="follow-btn-disabled" disabled size="small" block><i class="fa fa-check"></i>已关注</van-button>
        </template>
        <template v-else>
          <van-button class="follow-btn" size="small" block><i class="fa fa-plus"></i>关注</van-button>
        </template>
      </div>
    </div>
    <div class="info">
      <div class="info-head">
        <span class="name">{{userInfo.name}}</span>
        <template v-if="userInfo.sex !== '保密'">
          <i class="sex fa" :class="sexClass"></i>
        </template>
        <span class="level" :class="'level'+userInfo.level">
          <i class="fa" :class="'fa-level-'+userInfo.level"></i>
        </span>
        <van-tag v-if="isMember" class="vip" size="sm">{{ memberText }}</van-tag>
      </div>

      <div class="info-body">
        <template v-if="userInfo.official.role > 0">
          <img v-if="userInfo.official.type === 0" class="offical" src="@/assets/images/upzhu.png">
          <img v-if="userInfo.official.type === 1" class="offical" src="@/assets/images/enterprise.png">
          <div class="sign" :class="{'sign-open': isExpand}">
            bilibili UP主认证：{{ userInfo.official.title }}
          </div>
        </template>
        <template v-else>
          <div class="desc" :class="{'desc-open': isExpand}">{{ formatSign(userInfo.sign) }}</div>
        </template>
        <span class="btn" @click="toggleDetail">{{isExpand ? '收起' : '展开'}}</span>
      </div>
      <div class="info-foot">
        <template v-if="userInfo.official.role > 0">
          <div class="desc">{{ formatSign(userInfo.sign) }}</div>
        </template>
        <template v-if="isExpand">
          <van-tag class="badge" v-if="userInfo.fans_badge">粉丝勋章</van-tag>
          <van-tag class="badge" >uid:{{userInfo.mid}}</van-tag>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, computed, watch } from 'vue'
import { Button as VanButton, Tag as VanTag } from 'vant'
import Avatar from '@/components/Avatar'
import { formatNumber } from '@/utils'
import { spaceApi } from '@/api'
export default {
    name: 'SpaceInfo',
    components: {
      VanButton,
      VanTag,
      Avatar
    },
    props: {
        detailData: {
            type: Object
        },
        mid: {
          type: [Number, String]
        }
    },
    setup(props) {
        const params = reactive({
          followData: null,
          beliked: null,
          isExpand: false,
          hasUserInfo: computed(() => !!props.detailData),
          userInfo: computed(() => props.detailData || {}),
          isMember: computed(() => params.userInfo?.vip?.status === 1 ?? false),
          memberText: computed(() => {
            let text = ''
            if (params.isMember) {
              const vipType = params.userInfo.vip.type
              switch (vipType) {
                case 1:
                  text = '大会员'
                  break
                case 2:
                  text = '年度大会员'
                  break
                }
              }
            return text
          }),
          sexClass: computed(() => {
              let cls = 'fa-male'
              if (params.hasUserInfo && params.userInfo.sex === '女') {
                cls = 'fa-female'
              }
              return cls
          })            
        })
        
        const formatSign = value => {
            return value || '这个人很神秘，什么都没有写'
        }

        const toggleDetail = () => {
            params.isExpand = !params.isExpand
        }

        const getSocial = async () => {
            try {
                const { data } = await spaceApi.getUserStat({
                    vmid: props.mid
                })
                if (data) {
                    params.followData = data                    
                }
            } catch (error) {
                console.log(error)
            }
        }

        const getBeliked = async () => {
            try {
                const { data } = await spaceApi.getUserUpStat({
                    mid: props.mid
                })
                if (data) {
                    params.beliked = data.likes                    
                }
            } catch (error) {
                console.log(error)
            }
        }

        const initData = async () => {
            try {
                await getSocial()
                await getBeliked()
            } catch (error) {
                console.log(error)
            }   
        }

        watch(() => props.id, () => {
            initData()
        }, {
            immediate: true
        })

        return {
            ...toRefs(params),
            formatSign,
            toggleDetail,
            formatNumber
        }
    }
}
</script>


<style lang="scss" scoped>
  .basic-info {
    background-color: $color-white;
    .banner{
      height: 90px;
      overflow: hidden;
      .img{
        width: 100%;
        height: 130px;
        object-fit: cover;
      }
    }
    .social{
      display: flex;
      justify-content: space-between;
      padding: {
        left: 10px;
        right: 10px;
      }
      .face{
        margin-top: -6px;
      }
      .trends {
        flex: 1;
        margin: {
          top: 8px;
          left: 50px;
        }
      }
      .grid{
        display: flex;
        .col {
          flex: 1;
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          &::after{
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -8px;
            display: block;
            width: 1px;
            height: 16px;
            background-color: #e7e7e7;
          }
          &:last-child {
            &::after{
              display: none;
            }
          }
        }
        .num {
          font-size: 14px;
          color: $color-text-primary;
        }
        .unit{
          font-size: 12px;
          color: $color-text-secondary;
        }
      }
      .follow-btn{
        margin-top: 10px;
        font-size: 14px;
        color: $color-white;
        background-color: $theme-color;
        &::after{
          border-color: $theme-color;
        }
      }
      .follow-btn-disabled{
        margin-top: 10px;
      }
    }
    .info {
      padding: 12px 10px;
      .name {
        font-size: 18px;
        max-width: 235px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 10px;
      }
      .level,.vip{
        margin-bottom: 0;
      }
      .sex {
        margin-right: 5px;
        &.fa-male{
          color: $color-primary;
        }
        &.fa-female{
          color: $theme-color;
        }
      }
      .level{
        vertical-align: middle;
        &0,&1{
          color: #bfbfbf;
        }
        &2{
          color: #95ddb2;
        }
        &3{
          color: #92d175;
        }
        &4{
          color: #ff837c;
        }
        &5{
          color: #ff6c00;
        }
        &6{
          color: #f00;
        }
        .fa {
          font-size: 30px;
        }
      }
      .vip{
        transform: scale(.8);
        background-color: $theme-color;
        color: $color-white;
      }
      &-body{
        display: flex;
        .offical {
          width: 18px;
          height: 18px;
          margin-right: 5px;
        }
        .sign,.desc{
          flex: 1;
          height: 16px;
          font-size: 13px;
          color: $color-text-regular;
          @include max-lines(1);
          line-height: normal;
          &-open{
            display: block;
            height: auto;
            white-space: normal;
          }
        }
        .desc{
          color: $color-text-secondary;
        }
        .btn{
          line-height: normal;
          font-size: 13px;
          color: #1389bf;
        }
      }
      &-foot {
        .desc{
          margin-top: 8px;
          font-size: 13px;
          color: $color-text-secondary;
        }
        .badge{
          vertical-align: middle;
          font-size: 12px;
          color: $color-text-regular;
          background-color: $color-grey;
          transform: scale(.8);
        }
      }
    }
  }
</style>
